<template>
    <div class="xunjingwendao">
        <Navbar :activeMenu="currentPath" />
        <el-dialog title="测算结果" :visible.sync="centerDialogVisible" width="50%" class="dialog_cesuan">
            <div class="ys">
                <div class="" v-if="data != null">
                    <div class="yjnshi">
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">速配星座</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["今日运势"]["速配星座"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">提防星座</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["今日运势"]["提防星座"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">幸运颜色</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["今日运势"]["幸运颜色"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">幸运数字</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["今日运势"]["幸运数字"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">幸运宝石</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["今日运势"]["幸运宝石"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">综合分数</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["今日运势"]["综合分数"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">爱情分数</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["今日运势"]["爱情分数"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">事业分数</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["今日运势"]["事业分数"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">心情分数</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["今日运势"]["心情分数"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">交际分数</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["今日运势"]["交际分数"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">今明运势</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["今日运势"]["今明运势"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">爱情运势</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["今日运势"]["爱情运势"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">事业运势</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["今日运势"]["事业运势"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">财富运势</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["今日运势"]["财富运势"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">健康运势</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["今日运势"]["健康运势"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">财富分数</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["今日运势"]["交际分数"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">健康分数</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["今日运势"]["健康分数"] }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="yjnshi">
                        <p style="text-align: center; font-weight: 800">明日运势</p>

                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">速配星座</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["明日运势"]["速配星座"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">提防星座</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["明日运势"]["提防星座"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">幸运颜色</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["明日运势"]["幸运颜色"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">幸运数字</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["明日运势"]["幸运数字"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">幸运宝石</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["明日运势"]["幸运宝石"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">综合分数</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["明日运势"]["综合分数"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">爱情分数</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["明日运势"]["爱情分数"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">事业分数</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["明日运势"]["事业分数"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">心情分数</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["明日运势"]["心情分数"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">交际分数</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["明日运势"]["交际分数"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">今明运势</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["明日运势"]["今明运势"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">爱情运势</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["明日运势"]["爱情运势"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">事业运势</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["明日运势"]["事业运势"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">财富运势</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["明日运势"]["财富运势"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">健康运势</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["明日运势"]["健康运势"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">财富分数</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["明日运势"]["交际分数"] }}</p>
                            </div>
                        </div>
                        <div class="infos">
                            <div class="title11">
                                <span class="shu"></span>
                                <span class="ti">健康分数</span>
                            </div>
                            <div class="content">
                                <p class="details">{{ data["明日运势"]["健康分数"] }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="yl">
                    <span>仅供娱乐！请勿当真</span>
                </div>
            </div>
        </el-dialog>
        <div class="main container" style="display: flex">
            <div class="left">
                <div class="suanming cell" style="height: 455px">
                    <h3 class="title">
                        <p class="line">算命精选</p>
                    </h3>
                    <ul class="col-2">
                        <li v-for="(item, index) in leftData" :key="index" @click="leftClick(item.val)"
                            style="cursor: pointer">
                            <span>{{ item.name }}</span>
                        </li>
                    </ul>
                </div>
                <div class="ceshi cell" style="height: 110px">
                    <h3 class="title">
                        <p class="line">测算吉凶</p>
                    </h3>
                    <ul class="col-2">
                        <li @click="leftClick(item.val)" v-for="(item, index) in csjx" :key="index">
                            <span>{{ item.name }}</span>
                        </li>
                    </ul>
                </div>
                <div class="qiming cell">
                    <h3 class="title">
                        <p class="line">测算姓名</p>
                    </h3>
                    <ul class="col-2">
                        <li @click="cqFn(item.val)" v-for="(item, index) in csxm" :key="index">
                            {{ item.name }}
                        </li>
                    </ul>
                </div>
                <div class="peidui cell">
                    <h3 class="title">
                        <p class="line">每日运势</p>
                    </h3>
                    <ul class="col-2">
                        <li v-for="(item, index) in xzys" :key="index" @click="xzysFn(item.val)">
                            <span>{{ item.name }}</span>
                        </li>
                    </ul>
                </div>

                <div class="peidui cell" style="height: 200px">
                    <h3 class="title">
                        <p class="line">其他工具</p>
                    </h3>
                    <ul class="col-2">
                        <li v-for="(item, index) in tools" :key="index" @click="xzysFn(item.val)">
                            <span>{{ item.name }}</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="zonghe" style="width: 100%; flex: 1; margin: 0 10px">
                <!-- 八字测算 -->
                <bazicesuan v-if="concomStatus == 'bzcs'"></bazicesuan>
                <jiuxingmingli v-if="concomStatus == 'jxml'"></jiuxingmingli>
                <bazihehun v-if="concomStatus == 'bzhh'"></bazihehun>
                <bazihepan v-if="concomStatus == 'bzhp'"></bazihepan>

                <weilaiyunshi v-if="concomStatus == 'wlys'"></weilaiyunshi>
                <shengxiaoyunshi v-if="concomStatus == 'sxys'"></shengxiaoyunshi>
                <xiaoliurenzhanbu v-if="concomStatus == 'xlrzb'"></xiaoliurenzhanbu>
                <fzlq v-if="concomStatus == 'fzlq'"></fzlq>
                <gylq v-if="concomStatus == 'gylq'"> </gylq>
                <zglq v-if="concomStatus == 'zglq'"> </zglq>
                <yllq v-if="concomStatus == 'yllq'"> </yllq>
                <mzlq v-if="concomStatus == 'mzlq'"> </mzlq>
                <lzlq v-if="concomStatus == 'lzlq'"> </lzlq>

                <zxyg v-if="concomStatus == 'zxyg'"> </zxyg>
                <mryz v-if="concomStatus == 'mryz'"> </mryz>
                <zwzb v-if="concomStatus == 'zwzb'"> </zwzb>
                <tlpzb v-if="concomStatus == 'tlpzb'"> </tlpzb>
                <xmpd v-if="concomStatus == 'xmpd'"> </xmpd>
                <sjpd v-if="concomStatus == 'sjpd'"> </sjpd>
                <xzpd v-if="concomStatus == 'xzpd'"> </xzpd>
                <srpd v-if="concomStatus == 'srpd'"> </srpd>

                <sxpd v-if="concomStatus == 'sxpd'"> </sxpd>
                <xxpd v-if="concomStatus == 'xxpd'"> </xxpd>
                <xmdf v-if="concomStatus == 'xmdf'"></xmdf>
                <gsmdf v-if="concomStatus == 'gsmdf'"> </gsmdf>
                <zxqm v-if="concomStatus == 'zxqm'"></zxqm>
                <bzjs v-if="concomStatus == 'bzjs'"></bzjs>
                <ceshuzi v-if="concomStatus == 'szcjx'"> </ceshuzi>
                <ceshoujihao v-if="concomStatus == 'sjcjx'"> </ceshoujihao>
                <zyhx v-if="concomStatus == 'zyhx'"></zyhx>
                <srlm v-if="concomStatus == 'srlm'"></srlm>
                <gxlm v-if="concomStatus == 'gxlm'"> </gxlm>
                <ldlh v-if="concomStatus == 'ldlh'"></ldlh>
                <myyc v-if="concomStatus == 'myyc'"> </myyc>
                <yyyc v-if="concomStatus == 'yyyc'"> </yyyc>
                <jhyc v-if="concomStatus == 'jhyc'"> </jhyc>
                <cyyc v-if="concomStatus == 'cyyc'"> </cyyc>
                <zgjm v-if="concomStatus == 'zgjm'"></zgjm>

                <wenzhang v-if="concomStatus == 'wenzhang'" :title="con_title" :content="con_content"></wenzhang>
                <div class="wenzhang">
                    <h3 class="title" style="margin-bottom: 0px">
                        <p class="line">文章列表</p>
                    </h3>
                    <div class="content_wz" @click="jumpwz(item)" v-for="(item, index) in list.data" :key="index">
                        <div>
                            {{ item.title }}
                        </div>
                        <div>2025-05-15</div>
                    </div>
                </div>
            </div>

            <div class="right">
                <div class="laohuangli cell">
                    <h3 class="title" style="margin-bottom: 0px">
                        <p class="line">今日老黄历</p>
                    </h3>
                    <div class="content">
                        <a>
                            <el-date-picker v-model="currentDate" type="date" @change="getLhl" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd" placeholder="选择日期查询黄历">
                            </el-date-picker>
                            <div class="date" style="margin-top: 10px">
                                <p>{{ lhl.yangli }} {{ lhl.xingqi }}</p>
                                <p>{{ lhl.yinli }}</p>
                            </div>
                            <div class="yi yjc">
                                <p class="left"><i class="yi-icon"></i></p>
                                <p class="right">
                                    {{ lhl.yi }}
                                </p>
                            </div>
                            <div class="ji yjc">
                                <p class="left"><i class="ji-icon"></i></p>
                                <p class="right">
                                    {{ lhl.ji }}
                                </p>
                            </div>
                            <div class="chong yjc">
                                <p class="left"><i class="chong-icon"></i></p>
                                <p class="right">{{ lhl.chongsha }}</p>
                            </div>
                            <div class="chong yjc" style="display: flex; align-items: center">
                                <p class="left" style="
                    color: #6f700f;
                    font-weight: 800;
                    min-width: 50px;
                    font-size: 15px;
                  ">
                                    纳音：
                                </p>
                                <p class="right">{{ lhl.wuxing }}</p>
                            </div>
                            <div class="chong yjc" style="display: flex; align-items: center">
                                <p class="left" style="
                    color: #6f700f;
                    font-weight: 800;
                    min-width: 50px;
                    font-size: 15px;
                  ">
                                    百忌：
                                </p>
                                <p class="right">{{ lhl.baiji }}</p>
                            </div>
                            <div class="chong yjc" style="display: flex; align-items: center">
                                <p class="left" style="
                    color: #6f700f;
                    font-weight: 800;
                    min-width: 50px;
                    font-size: 15px;
                  ">
                                    星宿：
                                </p>
                                <p class="right">{{ lhl.xingxiu }}</p>
                            </div>
                            <div class="chong yjc" style="display: flex; align-items: center">
                                <p class="left" style="
                    color: #6f700f;
                    font-weight: 800;
                    min-width: 50px;
                    font-size: 15px;
                  ">
                                    贵神：
                                </p>
                                <p class="right">{{ lhl.guishenfangwei }}</p>
                            </div>
                            <div class="chong yjc" style="display: flex; align-items: center">
                                <p class="left" style="
                    color: #6f700f;
                    font-weight: 800;
                    min-width: 50px;
                    font-size: 15px;
                  ">
                                    喜神：
                                </p>
                                <p class="right">{{ lhl.xishenfangwei }}</p>
                            </div>
                            <div class="chong yjc" style="display: flex; align-items: center">
                                <p class="left" style="
                    color: #6f700f;
                    font-weight: 800;
                    min-width: 50px;
                    font-size: 15px;
                  ">
                                    福神：
                                </p>
                                <p class="right">{{ lhl.fushenfangwei }}</p>
                            </div>
                            <div class="chong yjc" style="display: flex; align-items: center">
                                <p class="left" style="
                    color: #6f700f;
                    font-weight: 800;
                    min-width: 50px;
                    font-size: 15px;
                  ">
                                    财神：
                                </p>
                                <p class="right">{{ lhl.caishenfangwei }}</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="qiming cell" style="height: 200px">
                    <h3 class="title">
                        <p class="line">算卦占卜</p>
                    </h3>
                    <ul class="col-2">
                        <li v-for="(item, index) in zb" @click="leftClick(item.val)" :key="index">
                            {{ item.name }}
                        </li>
                    </ul>
                </div>
                <div class="qiming cell" style="height: 200px">
                    <h3 class="title">
                        <p class="line">在线抽签</p>
                    </h3>
                    <ul class="col-2">
                        <li @click="cqFn(item.val)" v-for="(item, index) in cq" :key="index">
                            {{ item.name }}
                        </li>
                    </ul>
                </div>
                <div class="qiming cell" style="height: 200px">
                    <h3 class="title">
                        <p class="line">缘分配对</p>
                    </h3>
                    <ul class="col-2">
                        <li v-for="(item, index) in yfpd" @click="cqFn(item.val)" :key="index">
                            {{ item.name }}
                        </li>
                    </ul>
                </div>
            </div>

            <div class="cl"></div>
        </div>
        <Footer />
        <el-dialog :visible.sync="dialogVisible" width="30%">
            <e-run-calendar ref="betterCalendarRef" :showCalendar="true" @confirm="selectDate" :isHourShow="true"
                :selectOptions="selectOptionsArr"></e-run-calendar>
        </el-dialog>
        <el-dialog :visible.sync="dialogVisibleArea" width="30%">
            <el-select class="year-select" v-model="form.province" placeholder="选择省份" @change="handleProviceChange">
                <el-option v-for="item in columns[0]" :key="item" :label="item" :value="item"></el-option>
            </el-select>

            <el-select class="year-select" v-model="form.city" placeholder="选择城市" @change="handleCityChange">
                <el-option v-for="item in columns[1]" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-select class="year-select" v-model="form.area" placeholder="选择区县" @change="handleAreaChange">
                <el-option v-for="item in columns[2]" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button @click="dialogVisibleArea = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitCsd">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import list from "@/api/list.json";
import { jingweidu, recordAdd, courseTypeListOne } from "@/api/index";
import eRunCalendar from "@/components/e-run-calendar/e-run-calendar.vue";
import dataJsonArr from "@/assets/js/diqu_arr.json";
import bazicesuan from "./bazicesuan.vue";
import jiuxingmingli from "./jiuxingmingli.vue";
import bazihehun from "./bazihehun.vue";
import bazihepan from "./bazihepan.vue";
import weilaiyunshi from "./weilaiyunshi.vue";
import shengxiaoyunshi from "./shengxiaoyunshi.vue";
import xiaoliurenzhanbu from "./bugua/xiaoliurenzhanbu.vue";
import gylq from "./lingqian/gylq.vue";
import fzlq from "./lingqian/fzlq.vue";
import zglq from "./lingqian/zglq.vue";
import yllq from "./lingqian/yllq.vue";
import mzlq from "./lingqian/mzlq.vue";
import lzlq from "./lingqian/lzlq.vue";
import zxyg from "./bugua/zxyg.vue";
import mryz from "./bugua/mryz.vue";
import zwzb from "./bugua/zwzb.vue";
import tlpzb from "./bugua/tlpzb.vue";
import xmpd from "./peidui/xmpd.vue";
import sjpd from "./peidui/sjpd.vue";
import xzpd from "./peidui/xzpd.vue";
import srpd from "./peidui/srpd.vue";
import sxpd from "./peidui/sxpd.vue";
import xxpd from "./peidui/xxpd.vue";
import xmdf from "./dafen/xmdf.vue";
import gsmdf from "./dafen/gsmdf.vue";
import bzjs from "./bzjs.vue";
import zxqm from "./dafen/zxqm.vue";
import wenzhang from "./wenzhang.vue";
import ceshuzi from "./cejixiong/szcjx.vue";
import ceshoujihao from "./cejixiong/sjhcjx.vue";
import zyhx from "./zhengyuanhuaxiang.vue";
import srlm from "./more/shengrilunming.vue";
import gxlm from "./more/guxianglunming.vue";
import ldlh from "./more/liudaolunhui.vue";
import myyc from "./more/mingyunyuce.vue";
import yyyc from "./more/yinyuanyuce.vue";
import jhyc from "./more/jiehunyuce.vue";
import cyyc from "./more/caiyunyuce.vue";
import zgjm from "./tools/zgjm.vue";
export default {
    name: "Index",
    components: {
        srlm,
        cyyc,
        jhyc,
        yyyc,
        myyc,
        ldlh,
        gxlm,
        zgjm,
        eRunCalendar,
        bazicesuan,
        jiuxingmingli,
        bazihehun,
        bazihepan,
        weilaiyunshi,
        shengxiaoyunshi,
        xiaoliurenzhanbu,
        fzlq,
        gylq,
        zglq,
        mzlq,
        yllq,
        lzlq,
        zxyg,
        mryz,
        zwzb,
        tlpzb,
        xmpd,
        sjpd,
        xzpd,
        srpd,
        sxpd,
        xxpd,
        xmdf,
        gsmdf,
        zxqm,
        wenzhang,
        bzjs,
        ceshuzi,
        ceshoujihao,
        zyhx,
    },
    mounted() {
        this.diquchushihua();
        this.getcourseTypeListOne();

        this.getCurrentDate();
    },
    computed: {
        currentPath() {
            return "/other"; // 获取当前路由路径
        },
    },
    methods: {
        diquchushihua() {
            this.diquData = dataJsonArr;
            console.log(this.diquData);
            this.diquData.forEach((item) => {
                this.province = [...this.province, item.label];
            });
            // 设置默认省份：北京
            this.$set(this.columns, 0, this.province);
        },
        onSubmit() {
            if (!this.form.name) {
                this.$message.error("请输入姓名");
                return;
            }
            if (!this.form.birthday) {
                this.$message.error("请选择出生日期");
            }
            if (!this.csdq) {
                this.$message.error("请选择出生地区");
                return;
            }
            if (!this.form.birthday) {
                this.$message("请选择出生日期");
                return false;
            }

            this.addPaipanRecord();
            localStorage.setItem(
                "arrangeEightFormStorage",
                JSON.stringify(this.form)
            );
            this.$router.push({
                path: "/paipan",
            });
        },
        getcourseTypeListOne() {
            courseTypeListOne({}).then((res) => {
                console.log(res);
                let courseTypeOne = JSON.stringify(res.data);

                localStorage.setItem("courseType", courseTypeOne);
            });
        },
        addPaipanRecord() {
            let data = {
                name: this.form.name,
                sex: this.form.sex,
                birthday: this.form.birthday,
                year: this.form.year,
                cityFull: this.form.cityFull,
                isLunar: this.form.isLunar,
                defaultIndex: [0, 0, 0],
                dimension: this.jingweidu,
            };
            recordAdd(data).then((res) => {
                console.log(res, "保存排盘记录");
            });
        },
        cqFn(v) {
            this.concomStatus = v;
            this.scrollToTop();
        },
        getjingweidu() {
            let data = {
                // 这里放置你要传递的参数
                sheng: this.form.province,
                shi: this.form.city,
                qu: this.form.area,
            };

            jingweidu(data).then((res) => {
                if (res.msg != "") {
                    this.jingweidu = res.msg;
                } else {
                    this.jingweidu = "东经:101.811'北纬：36.6045";
                }
            });
        },
        xzysFn(val) {
            this.concomStatus = val;
            this.scrollToTop();
        },
        openDialog(v) {
            let parmas = {
                api_key: "FNcQHQuf0W8wDrXMjWc0xqTzw",
                type: 0,
                title_yunshi: v,
            };
            let config = {
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
            };
            this.$axios
                .post(window.config.apiUrl + "/v1/Zhanbu/yunshi", parmas, config)
                .then((res) => {
                    if (res.data.errcode == -1) {
                        this.$message({
                            type: "warning",
                            message: res.data.errmsg,
                        });

                        return;
                    }
                    this.centerDialogVisible = true;

                    this.data = res.data.data;
                });
        },
        handleProviceChange(value) {
            this.$set(this.columns, 2, []);
            this.area = [];
            this.city = [];
            this.cityAll = [];
            this.diquData.forEach((item) => {
                if (item.label == value) {
                    item.children.forEach((val) => {
                        this.cityAll = [...this.cityAll, val];
                        console.log(this.cityAll);
                        this.city = [...this.city, val.label];
                        if (item.children[0].label == val.label) {
                            console.log(item.children[0].children);
                            item.children[0].children.forEach((b) => {
                                this.columns[2].push(b);
                            });
                        }
                    });
                }
            });
            console.log(this.city);
            this.columns.splice(1, 1, this.city);
            this.form.city = this.city[0];
            this.form.area = this.columns[2][1];
        },
        leftClick(v) {
            if (v == "bzpp") {
                this.$router.push({
                    path: "/",
                });
                return;
            }
            console.log(v);
            this.concomStatus = v;
            this.scrollToTop();
        },
        scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: "smooth",
            });
        },
        handleCityChange(value) {
            this.area = [];
            console.log(this.cityAll);
            this.cityAll.forEach((item) => {
                if (item.label == value) {
                    item.children.forEach((val) => {
                        this.area = [...this.area, val];
                    });
                }
            });

            this.columns.splice(2, 1, this.area);
            this.form.area = this.area[0];
        },
        handleAreaChange(value) {
            console.log(value);
        },
        onSubmitCsd() {
            if (!this.form.province || !this.form.city || !this.form.area) {
                this.$message.error("请选择出生地区");
                return;
            }
            let provice = this.form.province;
            let city = this.form.city;
            let area = this.form.area.replace(/\s+/g, "");
            console.log(provice, city, area);
            this.form.cityFull = provice + "/" + city + "/" + area;
            this.csdq = this.form.cityFull;
            this.showArea = false;
            this.getjingweidu();
            this.form.zhen = 2;
            this.dialogVisibleArea = false;
        },
        getCurrentDate() {
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
            const day = String(today.getDate()).padStart(2, "0");
            this.currentDate = `${year}-${month}-${day}`;
            this.getLhl();
        },
        jumpwz(item) {
            this.concomStatus = "wenzhang";
            this.con_content = item.content;
            this.con_title = item.title;
            this.scrollToTop();
        },
        getLhl() {
            let params = {
                title_laohuangli: this.currentDate,
                api_key: "FNcQHQuf0W8wDrXMjWc0xqTzw",
            };
            console.log(params);
            let config = {
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
            };

            this.$axios
                .post(window.config.apiUrl + "/v1/Gongju/laohuangli", params, config)
                .then((res) => {
                    console.log(res.data.data);
                    this.lhl = res.data.data;
                });
        },
        selectDate(e) {
            this.showTime = false;
            this.form.birthday = e.text;

            console.log(e);
            if (e.type === "lunar") {
                // 农历
                this.form.isLunar = 1;
                this.form.type = 0;
            } else {
                // 公历
                this.form.isLunar = 0;
                this.form.type = 1;
            }

            this.form.year = e.year;

            this.form.month = e.month;
            this.form.day = e.day;
            this.form.hours = e.hour;
            this.form.minute = e.minute;
            this.dialogVisible = false;
            console.log(this.form);
            // 农历日期不对,需要改动
        },
    },
    data() {
        return {
            data: null,
            dialogVisible: false,
            xzys_val: -1,
            centerDialogVisible: false,
            dialogVisibleArea: false,
            selectValue: [124, 9, 10, 10, 10], // 默认弹出选择的状态1998-10-16 0
            selectOptionsArr: [30, 0, 0, 0], //是否显示组件
            dataJsonArr,
            leftData: [
                { name: "八字测算", val: "bzcs" },
                { name: "九星命理", val: "jxml" },
                { name: "八字合婚", val: "bzhh" },
                { name: "八字合盘", val: "bzhp" },
                { name: "未来运势", val: "wlys" },

                { name: "生肖运势", val: "sxys" },
                { name: "八字排盘", val: "bzpp" },
                { name: "八字精算", val: "bzjs" },
                { name: "正缘画像", val: "zyhx" },

                { name: "生日论命", val: "srlm" },
                { name: "骨相论命", val: "gxlm" },
                { name: "六道轮回", val: "ldlh" },
                { name: "命运预测", val: "myyc" },
                { name: "姻缘预测", val: "yyyc" },
                { name: "结婚预测", val: "jhyc" },
                { name: "财运预测", val: "cyyc" },
            ],
            zb: [
                { name: "小六壬占卜", val: "xlrzb" },
                { name: "在线摇卦", val: "zxyg" },
                { name: "每日一占", val: "mryz" },
                { name: "指纹占卜", val: "zwzb" },
                { name: "塔罗牌占卜", val: "tlpzb" },
            ],
            cq: [
                { name: "佛祖灵签", val: "fzlq" },
                { name: "观音灵签", val: "gylq" },
                { name: "诸葛灵签", val: "zglq" },
                { name: "月老灵签", val: "yllq" },
                { name: "妈祖灵签", val: "mzlq" },
                { name: "吕祖灵签", val: "lzlq" },
            ],
            yfpd: [
                { name: "姓名配对", val: "xmpd" },
                { name: "生日配对", val: "srpd" },
                { name: "星座配对", val: "xzpd" },
                { name: "生肖配对", val: "sxpd" },
                { name: "手机配对", val: "sjpd" },
                { name: "血型配对", val: "xxpd" },
            ],
            csxm: [
                { name: "姓名打分", val: "xmdf" },
                { name: "公司名打分", val: "gsmdf" },
                { name: "在线起名", val: "zxqm" },
            ],
            csjx: [
                { name: "数字测吉凶", val: "szcjx" },
                { name: "手机号测吉凶", val: "sjcjx" },
            ],
            tools: [
                { name: "黄历查询", val: "hlcx" },
                { name: "周公解梦", val: "zgjm" },
            ],
            xzys: [
                { name: "水瓶座 (1.20~2.18)", bir: "1.20~2.18", val: 10 },
                { name: "双鱼座 (2.18~3.20)", bir: "2.18~3.10", val: 11 },
                { name: "白羊座 (3.21~4.19)", bir: "3.21~4.29", val: 0 },
                { name: "金牛座 (4.20~5.20)", bir: "(4.20~5.20)", val: 1 },
                { name: "双子座 (5.21~6.21)", bir: "1.20~2.18", val: 2 },
                { name: "巨蟹座 (6.22~7.22)", bir: "2.18~3.10", val: 3 },
                { name: "狮子座 (7.23~8.22)", bir: "1.20~2.18", val: 4 },
                { name: "处女座 (8.23~9.22)", bir: "2.18~3.10", val: 5 },
                { name: "天秤座 (9.23~10.23)", bir: "1.20~2.18", val: 6 },
                { name: "天蝎座(10.24~11.22)", bir: "2.18~3.10", val: 7 },
                { name: "射手座(11.23~12.21)", bir: "1.20~2.18", val: 8 },
                { name: "摩羯座 (12.22~1.19)", bir: "2.18~3.10", val: 9 },
            ],
            province: "",
            columns: [[], ["市辖区"], []],
            city: "",
            area: "",
            jingweidu: "",
            csdq: "",
            cityAll: [],
            con_content: "",
            con_wenzhang: "",
            con_title: "",
            diquData: [],
            concomStatus: "bzcs",
            currentDate: "",
            apiUrl: window.config.apiUrl,
            lhl: {
                yi: "",
                ji: "",
                chong: "",
                yinli: "",
                xingqi: "",
                chongsha: "",
            },
            list: list,
            form: {
                Siling: "0",
                name: "",
                ztys: "1",
                Sect: "1",
                sex: "0",
                leixinggg: "0",
                birthday: null,
                date: "",
                time: "",
                isLunar: 0,
                year: null,
                month: null,
                day: null,
                hours: null,
                minute: null,
                zhen: 2,
                province: "",
                cityShi: "",
                type: 0,
                city: "",
                cityFull: "",
                defaultIndex: [0, 0, 0],
                dimension: "",
            },
            msg: "Welcome to Your Vue.js App",
        };
    },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
    padding: 0;
}

::v-deep .el-dialog {
    margin-top: 0 !important;
    overflow: hidden;
}

.ys {
    height: calc(100vh - 100px);
    overflow: auto;
}

.dialog_cesuan {
    margin-top: 0 !important;
    overflow: hidden;

    .infos {
        margin-top: 14px;

        .title11 {
            display: flex;
            padding: 10px;

            .shu {
                width: 5px;
                height: 20px;
                background-color: #e6a84b;
                border-radius: 10px;
            }

            .ti {
                padding-left: 8px;
                font-weight: 800;
            }
        }

        .content {
            display: flex;
            flex-wrap: wrap;
            margin-left: 18px;
            margin-right: 18px;

            .items {
                width: 50%;
                margin-top: 15px;
                font-size: 14px;
            }

            .details {
                font-size: 14px;
                user-select: all;
            }
        }
    }
}

.year-select {
    margin: 10px;
}

.wenzhang {
    height: 700px;
    overflow: auto;
    border: 1px solid #f5f5f5;

    .content_wz {
        display: flex;
        justify-content: space-between;
        margin: 15px;
        padding-bottom: 10px;
        cursor: pointer;
        border-bottom: 1px solid #f5f5f5;
    }
}

/* 针对Webkit浏览器（Chrome, Safari, Edge等） */
.wenzhang::-webkit-scrollbar {
    display: none;
}

/* 针对Firefox */
.wenzhang {
    scrollbar-width: none;
    /* Firefox 64+ */
}

/* 通用：隐藏滚动条但保留滚动功能 */
.wenzhang {
    -ms-overflow-style: none;
    /* IE/Edge */
    scrollbar-width: none;
    /* Firefox */
}

.wenzhang::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari/Webkit */
}

.full-screen-iframe-container {
    position: relative;
    width: 100%;
    height: 1150px;

    /* 使用视口高度 */
    overflow: hidden;
}

.full-screen-iframe {
    width: 100%;
    height: 100%;
    border: none;
}
</style>